<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces - ShowCase</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

            <style type="text/css">
                .nestedUnit {
                    border:0px none !important;
                }

                .ui-layout-center .ui-layout-resizer {
                    border:1px solid #A8A8A8 !important;
                }

                .ui-tree-item span {
                    float:left !important;
                }

                .ui-tree {
                    border:0px none !important;
                }

                .ui-tabs {
                    border:0px none !important;
                }
            </style>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="40">
                    <p:commandButton value="Compose" onclick="composeDlg.show()" type="button" icon="ui-icon-document"/>
                </p:layoutUnit>

                <p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="MAILBOXES">
                    <h:form>
                        <p:tree value="#{mailbox.mailboxes}" var="box" selectionMode="single" selection="#{mailbox.mailbox}" style="width:170px">
                            <p:treeNode icon="ui-icon-mail-closed">
                                <h:outputText value="#{box}"/>
                            </p:treeNode>

                            <p:treeNode type="i" icon="ui-icon-mail-closed">
                                <h:outputText value="#{box}"/>
                            </p:treeNode>

                            <p:treeNode type="s" icon="ui-icon-transfer-e-w">
                                <h:outputText value="#{box}"/>
                            </p:treeNode>

                            <p:treeNode type="t" icon="ui-icon-trash">
                                <h:outputText value="#{box}"/>
                            </p:treeNode>

                            <p:treeNode type="j" icon="ui-icon-alert">
                                <h:outputText value="#{box}"/>
                            </p:treeNode>
                        </p:tree>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <p:layout>

                        <p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">

                            <p:tabView>

                                <p:tab title="Gmail">

                                    <h:form>

                                        <p:dataTable var="mail" value="#{mailbox.mails}">

                                            <p:column headerText="From" sortBy="#{mail.from}">
                                                #{mail.from}
                                            </p:column>

                                            <p:column headerText="Subject" sortBy="#{mail.subject}">
                                                #{mail.subject}
                                            </p:column>

                                            <p:column headerText="Date" sortBy="#{mail.date}">
                                                #{mail.date}
                                            </p:column>

                                            <p:column>
                                                <p:commandButton update=":mailViewer" icon="ui-icon-search" title="View">
                                                    <f:setPropertyActionListener value="#{mail }" target="#{mailbox.mail}" />
                                                </p:commandButton>
                                            </p:column>

                                        </p:dataTable>

                                    </h:form>

                                </p:tab>

                            </p:tabView>

                        </p:layoutUnit>

                        <p:layoutUnit position="center" styleClass="nestedUnit">

                            <p:outputPanel id="mailViewer">
                                <h:outputText value="#{mailbox.mail.body}" rendered="#{not empty mailbox.mail}" />
                            </p:outputPanel>

                        </p:layoutUnit>

                    </p:layout>

                </p:layoutUnit>

            </p:layout>

            <p:ajaxStatus style="width:32px;height:32px;display:block;position:fixed;right:0;top:0;z-index:100">
                <f:facet name="start">
                    <p:graphicImage value="/images/loading.gif" />
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>

            <p:dialog widgetVar="composeDlg" modal="true" header="New Email" width="530" showEffect="fade" hideEffect="fade">

                <h:form>

                    <h:panelGrid columns="2" cellspacing="5">
                        <h:outputLabel for="to" value="To: " />
                        <p:inputText id="to"/>

                        <h:outputLabel for="cc" value="CC: " />
                        <p:inputText id="cc"/>

                        <h:outputLabel for="subject" value="To: " />
                        <p:inputText id="subject" size="50"/>
                    </h:panelGrid>

                    <p:separator />

                    <p:editor widgetVar="editor" />

                    <p:separator />

                    <p:commandButton value="Send" onclick="composeDlg.hide()" actionListener="#{mailbox.send}" update=":msg" process="@this"/>
                    <p:commandButton value="Cancel" onclick="composeDlg.hide()" type="button"/>

                </h:form>

            </p:dialog>

            <p:growl id="msg" />

        </h:body>

    </f:view>

</html>

